
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>骡窝日报详情</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="/js/bootstrap-4.1.1-dist/css/bootstrap.min.css">
	<script src="/js/jquery/jquery.min.js"></script>
	<script src="/js/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
	<link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>
	<link rel="stylesheet" href="/css/reset.css"/>
	<link rel="stylesheet" href="/css/newsContent.css">
	<script src="/js/plugins/jrender/jrender.min.js"></script>
	<link rel="stylesheet" href="/js/plugins/dialog2/dialog.css"/>
	<script src="/js/plugins/dialog2/dialog.min.js"></script>
	<script src="/js/common.js"></script>

	<script>
		$(function () {




			//评论
			$("#commentBtn").click(function () {
				window.location.href = "/mine/newsComment.html?id=" + params.id
			})


			var params = getParams();
			//找日报
			$.get(baseUrl+"/newsPages/" + params.id, function (data) {
				console.log(data);
				$(".newsDetail").renderValues(data);
				var json = {"id": params.id, "browseNum": data.browseNum + 1};
				$.ajax({//更新浏览量
					type: "PUT",
					url: baseUrl+"/newsPages/"+params.id+"/browseNum",
					data: json,
				});
			});





			//=====================点赞相关=============================
			var user = JSON.parse(sessionStorage.getItem("user"));
			if (!user) {//如果没登录点击就跳登录界面
				$("#goodBtn").css("color", "black");
				$(".handleBtn").click(function () {
					$(document).dialog({
						type: 'confirm',
						closeBtnShow: true,
						content: '请登陆后再执行相关操作!',
						onClickConfirmBtn: function () {
							window.location.href = "/login.html"
						}
					});
				});
			}
			if (user) {
				//先回显点赞
				$.get(baseUrl +"/users/" + user.id + "/userLike/" + params.id, function (data) {
					console.log( data);
					if (data.success) {//已经点赞了
						$("#goodBtn").css("color", "red");

					} else {
						$("#goodBtn").css("color", "black");

					}
				})

				//点赞按钮操作
				$("#goodBtn").click(function () {
					var temp = $("#goodBtn").css("color");
					if ("rgb(0, 0, 0)" == temp) {//按钮为黑色时
						$.ajax({
							url: baseUrl+"/users/" + user.id + "/userLike/" + params.id ,//中间表保存关系
							method: "POST",

						});
						//将点赞数字加一,样式变红
						var temp = $("#goodBtn").html();
						$("#goodBtn").html(parseInt(temp) + 1);
						$("#goodBtn").css("color", "red");
						//更新数据库中的值
						var likeJson = {"id": params.id, "likeNum": parseInt($("#goodBtn").html())};
						$.ajax({
							type: "PUT",
							url: baseUrl+"/newsPages/"+params.id+"/likeNum",
							data: likeJson,
						});
					} else {//取消点赞
						//删除数据库关系
						$.ajax({
							url: baseUrl+"/users/" + user.id + "/userLike/" + params.id ,
							method: "DELETE",
						});
						//将点赞数字减一,样式变黑
						var temp = $("#goodBtn").html();
						$("#goodBtn").html(parseInt(temp) - 1);
						$("#goodBtn").css("color", "black");
						//更新数据库的值
						var likeJson = {"id": params.id, "likeNum": parseInt($("#goodBtn").html())};
						$.ajax({
							type: "PUT",
							url: baseUrl+"/newsPages/"+params.id+"/likeNum",
							data: likeJson,
						});
					}
				});

				//=======================收藏相关========================
				var user = JSON.parse(sessionStorage.getItem("user"));
				if (!user) {//如果没登录点击就跳登录界面
					$("#likeBtn").css("color", "black");
					$(".handleBtn").click(function () {
						$(document).dialog({
							type: 'confirm',
							closeBtnShow: true,
							content: '请登陆后再执行相关操作!',
							onClickConfirmBtn: function () {
								window.location.href = "/login.html"
							}
						});
					});

				}
				//先回显收藏
				$.get(baseUrl+"/newsPages/" + params.id + "/collections/" + user.id, function (data) {
					if (data.success) {//如果是有关注的
						$("#likeBtn").css("color", "red");

					} else {
						$("#likeBtn").css("color", "black");

					}
				})

				//收藏按钮操作
				$("#likeBtn").click(function () {
					var temp = $("#likeBtn").css("color");
					if ("rgb(0, 0, 0)" == temp) {//按钮黑色
						//点击事件 收藏文章
						$.ajax({
							url: baseUrl+"/newsPages/" +params.id+ "/collections/" + user.id,//保存关系
							method: "POST",
						});
						var temp = $("#likeBtn").html();
						$("#likeBtn").html(parseInt(temp) + 1);
						$("#likeBtn").css("color", "red");
						//更新收藏的数量
							var collectionJson = {"id": params.id, "collectionNum": parseInt($("#likeBtn").html())};
							$.ajax({
								type: "PUT",
								url: baseUrl+"/newsPages/"+params.id+"/collectionNum",
								data: collectionJson,
							});
					} else {//按钮红色,取消收藏
						//删除数据库数据
						$.ajax({
							url: baseUrl+"/newsPages/"+params.id+"/collections/"+user.id,
							method: "DELETE"
						});
						//将点赞数字建议,样式变黑
						var temp = $("#likeBtn").html();
						$("#likeBtn").html(parseInt(temp) - 1);
						$("#likeBtn").css("color", "black");
						//更新收藏的数量
						var collectionJson = {"id": params.id, "collectionNum": parseInt($("#likeBtn").html())};
						$.ajax({
							type: "PUT",
							url: baseUrl+"/newsPages/"+params.id+"/collectionNum",
							data: collectionJson,
						});
					}
				});
			}
		});
	</script>

</head>

<body>
<div class="newsDetail">
	<div>
		<a href="javascript:history.go(-1);" style="position: absolute;top: 10px;left: 22px;">
			<span><i class="fa fa-chevron-left fa-2x" style="color: white;"></i></span>
		</a>
		<img render-src="coverUrl">

		<div class="container">
			<div class="row typeRow">

				<div class="col-6">
					<span class="type">By骡窝官方</span>
				</div>
				<div class="col-6">
                    <span id="commentBtn">
                        <i class="fa fa-commenting-o commentBtn" style="color: #479eff;font-size: 15px"></i><a
							class="commentBtn">评论</a>
                    </span>
				</div>
			</div>
			<div class="detail">
				<h2 class="title" render-html="title"></h2>
				<h2 class="title" render-html="releaseTime"></h2>
				<div class="content" render-html="newsContent.content"></div>
			</div>
			<hr/>
			<div class="container d-flex">
				<div class="col-4">
					<i class="fa fa-thumbs-o-up handleBtn" id="goodBtn" style="color: red"
					   render-html="likeNum"></i>&nbsp;&nbsp;
				</div>
				<div class="col-4">
					<i class="fa fa-heart-o handleBtn" id="likeBtn" render-html="collectionNum">11 </i>&nbsp;&nbsp;
				</div>
				<div class="col-4">
					<i class="fa fa-eye handleBtn" id="browseBtn" render-html="browseNum">11 </i>
				</div>
			</div>
		</div>
	</div>
</div>


</body>

</html>